<template>
	<div class="global-right-router">
		<slot></slot>
	</div>
</template>

<script setup lang="ts" name="global-right-router">
import { watch } from 'vue';

// 布局尺寸
const styleParams = reactive<Record<string, string | number>>({
	'--layout-header': '76px',
	'--side-width': '186px'
});

// 左侧菜单收缩状态
const collapsed = ref<boolean>(false);

const watchStop = watch(
	() => collapsed.value,
	() => {
		const sideWidth = !collapsed.value ? '184px' : '64px';
		styleParams['--side-width'] = sideWidth;
	}
);
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.global-right-router {
	// width: calc(100vw - var(--side-width));
	height: calc(100vh - 125px);
	margin: 25px 16px;
	border: 1px solid @borderColor01;
	border-radius: 8px;
	padding: 20px 32px;
	background: rgba(8, 22, 59, 0.4);
}
</style>
